<h2>Demo: Audio Call - Outbound</h2>

<div>
    <input type="text" [(value)]="source">
</div>

<ol>
    <li><button [(disabled)]="connectDisabled" (click)="connect()">Connect</button> with
        <code><span id="server">{{server}}</span></code></li>
    <li><button (click)="register()">Register</button></li>
    <li><button [(disabled)]="callDisabled" (click)="call()">Place Call</button> with
        <input type="text" [(value)]="target">
    </li>
    <li><button [(disabled)]="hangupDisabled" (click)="hangup()">Hangup Call</button></li>
    <li><button [(disabled)]="disconnectDisabled" (disconnect)="disconnect()">Disconnect</button></li>
</ol>

<p>
    When the call is established, the remote audio is added to the following HTML5 audio element...
</p>

<audio #remoteAudio controls>
    <p>Your browser doesn't support HTML5 audio.</p>
</audio>

<p>
    While the call is established, DTMF may be sent using the following "keypad"...
</p>

<div class="dtmf">DTMF sent: <span id="dtmf">{{dtmf}}</span></div>
<div>
    <div *ngFor="let item of keypad">
        <button *ngFor="let li of item" class="keypad" [(disabled)]="li.disabled">{{li.title}}</button>
    </div>
</div>

<p>
    While the call is established, the session may placed on hold or muted...
</p>
<div>
    <input type="checkbox" id="hold" name="hold" [(disabled)]="hold.disabled" [(value)]="hold.checked">
    <label for="hold">Hold</label>
</div>
<div>
    <input type="checkbox" id="mute" name="mute" [(disabled)]="mute.disabled" [(value)]="mute.checked">
    <label for="mute">Mute</label>
</div>